<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body{
      background: url(./images/1.jpg);
      /* 设置背景铺满 */
      background-repeat:no-repeat;
      background-size:100%;

    }
    form{
      /* 设置form大小 */
      width: 400px;
      height: 400px;

      /* 加个背景颜色 */
      background-color: #E1E9EF;

      /* 设置透明度 */
      opacity: 80%;

      text-align: center;
      /* 再设置内边距 使得内容更偏向于中央位置 */
      /* 上方，下方内边距为120px 与 左边与右边均为100px 按照逆时针 */
      /* 但是会撑大盒子 */
      padding: 60px 100px;

      /* 设置文本文字的大小 */
      font-size: 18px;

      /* 添加圆角边框 */
      border-radius: 10px;

      /* 增加外边距 */
      /* 上下120px 然后左右居中 */
      margin: 100px auto;
    }

    .textinput{
      /* 设置宽高 */
      height: 40px;
      width: 300px;

      /* 设置内边距 */
      padding: 0 35px;

      /* 去除边框 */
      border: none;

      /* 设置背景颜色 */
      background: #F8F9F9;

      /* 设置字体大小 */
      font-size: 15px;

      /* 给文本框加上阴影 */
      box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7), inset 0px 2px 5px #aaaaaa;

      /* 给文本框加上圆角边框 */
      border-radius: 5px;

      /* 给文本框中输入文字加上颜色 */
      color: saddlebrown;
    }

    /* 筛选input标签中 type为"submit"的 进行渲染*/
    input[type="submit"]{
      /* 设置宽高 */
      width: 110px;
      height: 40px;

      /* 内部文本居中 */
      text-align: center;

      /* 圆角边框 */
      border-radius: 5px;

      /* 设置字体 */
      font:16px "黑体";

      /* 设置背景颜色 */
      background-color: #C0C6CB;
    }
    a {
      /* 去除下划线 */
      text-decoration: none;
    }

    a:hover {
      /* 悬空的时候有被选中的样子 出现下划线*/
      text-decoration: underline;
    }

    .loginh{
      text-align:center;
      font-size: 20px;
    }
  </style>
</head>
<body>
<form action="/_war_exploded/loginServlet" method="post">
  <p class="loginh">职工登录界面</p>
  <p>姓名<br />
    <input type="text" class="textinput" name="username" placeholder="请输入用户名" />
  </p>
  <p>密码<br />
    <input type="password" class="textinput" name="password" placeholder="请输入密码" />
  </p>
  <br>
  <label >身&emsp;份：</label>
  <select name="identity">
    <option>医生</option>
    <option>护士</option>
  </select>
  <br>
  <!--  <p>-->
  <!--    <input id="remember" type="checkbox" /><label for="smtxt">记住密码</label>-->
  <!--  </p>-->
  <p>
    <input type="submit" value="登录" />
  </p>
  <p class="smtxt">还没有账户？<a href="http://localhost:8080/_war_exploded/regist.html">注册</a></a>
  </p>

</form>
</body>
</html>